
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
    <!-- Meta-Information -->
    <title>Zawya Admin Panel</title>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Vendor: Bootstrap 4 Stylesheets  -->
    <link rel="stylesheet" href="css/jquery-ui.min.css">
    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <!-- Our Website CSS Styles -->
    <link rel="stylesheet" href="css/icons.min.css" type="text/css">
    <link rel="stylesheet" href="css/main.css" type="text/css">
    <link rel="stylesheet" href="css/responsive.css" type="text/css">

    <!-- Color Scheme -->
    <link rel="stylesheet" href="css/color-schemes/color.css" type="text/css" title="color3">
    <link rel="alternate stylesheet" href="css/color-schemes/color1.css" title="color1">
    <link rel="alternate stylesheet" href="css/color-schemes/color2.css" title="color2">
    <link rel="alternate stylesheet" href="css/color-schemes/color4.css" title="color4">
    <link rel="alternate stylesheet" href="css/color-schemes/color5.css" title="color5">

    <%--    edit by fjh--%>
    <%--    样式微调--%>
    <style>
        .search-input{
            background-color: #f7f7f7;
            color: #444444;
            float: left;
            font-size: 13px;
            height: 50px;
            letter-spacing: 0;
            padding: 10px 50px 10px 30px;
            width: 100%;
        }
        .search-btn{
            background-color: transparent;
            bottom: 0;
            color: #444444;
            font-size: 13px;
            position: absolute;
            right: 0;
            top: 0;
            width: 60px;
        }
    </style>
</head>
<body class="expand-data panel-data">
<div class="topbar">
    <div class="logo">
        <h1><a href="#" title=""><img src="images/logo1.png" alt="" /></a></h1>
    </div>
    <div class="topbar-data">
        <ul class="tobar-links">
            <li><a href="#" title=""><i class="ion-ios-bell"></i><span class="blue-bg">02</span></a>
                <div class="nti-drp-wrp">
                    <h5 class="blue-bg"><span>You Have</span> 7 Notifications</h5>
                    <div class="nti-lst">
                        <div class="nti-usr">
                            <span class="brd-rd50 rd-bg"><i class="fa fa-cog"></i></span>
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Sadi Orlaf</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Privacy settings changed</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <span class="brd-rd50 drkblu-bg"><i class="ion-ios-personadd"></i></span>
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Katti Smith</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Mike has added you as friend</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <span class="brd-rd50 orng-bg"><i class="ion-thumbsup"></i></span>
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Willimes Domson</a></h5> <span class="pst-tm">Just Now</span>
                                <i>like your timeline photo</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <span class="brd-rd50 grn-bg"><i class="ion-information-circled"></i></span>
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Holli Doe</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Curabitur id eros limes suscipit blandit.</i>
                            </div>
                        </div>
                    </div>
                    <div class="nt-ftr"><a href="#" title="">View All</a></div>
                </div>
            </li>
            <li><a href="#" title=""><i class="ion-android-drafts"></i><span class="green-bg">10</span></a>
                <div class="nti-drp-wrp">
                    <h5 class="green-bg"><span>You Have</span> 7 New Messages</h5>
                    <div class="nti-lst">
                        <div class="nti-usr">
                            <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Sadi Orlaf</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Privacy settings changed</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Katti Smith</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Mike has added you as friend</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <img class="brd-rd50" src="images/resource/acti-thmb3.jpg" alt="" />
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Willimes Domson</a></h5> <span class="pst-tm">Just Now</span>
                                <i>like your timeline photo</i>
                            </div>
                        </div>
                        <div class="nti-usr">
                            <img class="brd-rd50" src="images/resource/acti-thmb4.jpg" alt="" />
                            <div class="nti-usr-inr">
                                <h5><a href="#" title="">Holli Doe</a></h5> <span class="pst-tm">Just Now</span>
                                <i>Curabitur id eros limes suscipit blandit.</i>
                            </div>
                        </div>
                    </div>
                    <div class="nt-ftr"><a href="#" title="">View All</a></div>
                </div>
            </li>
            <li><a href="#" title=""><i class="ion-android-settings"></i></a>
                <div class="set-lst">
                    <div class="set-bd">
                        <h4>General Settings</h4>
                        <ul class="sett-lst">
                            <li>
                <span class="chck-bx">
                    <input id="set1" type="checkbox">
                    <label for="set1">Report Panel Usage</label>
                </span>
                                <i>General Settings information</i>
                            </li>
                            <li>
                <span class="chck-bx">
                    <input id="set2" type="checkbox">
                    <label for="set2">Mail Redirect</label>
                </span>
                                <i>General Settings information</i>
                            </li>
                            <li>
                <span class="chck-bx">
                    <input id="set3" type="checkbox">
                    <label for="set3">Expose Author Name</label>
                </span>
                                <i>General Settings information</i>
                            </li>
                        </ul>
                        <h4>Chat Settings</h4>
                        <ul>
                            <li>
                <span class="chck-bx">
                    <input id="set4" type="checkbox">
                    <label for="set4">Show Me As Online</label>
                </span>
                            </li>
                            <li>
                <span class="chck-bx">
                    <input id="set5" type="checkbox">
                    <label for="set5">Turn Off Notifications</label>
                </span>
                            </li>
                        </ul>
                    </div>
                    <div class="set-ft">
                        <a class="btn-danger" href="#" title=""><i class="fa fa-trash"></i> Delete Chat History</a>
                    </div>
                </div>
            </li>
            <li><a href="#" title=""><i class="ion-android-contacts"></i></a>
                <div class="cnt-lst">
                    <ul>
                        <li>
                            <div class="usr">
                                <img class="brd-rd50" src="images/resource/acti-thmb1.jpg" alt="" />
                                <div class="usr-innr">
                                    <h5><a href="#" title="">Smith Doe</a></h5>
                                    <span>Co Worker</span>
                                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="usr">
                                <img class="brd-rd50" src="images/resource/acti-thmb2.jpg" alt="" />
                                <div class="usr-innr">
                                    <h5><a href="#" title="">Katti Smith</a></h5>
                                    <span>Graphic Designer</span>
                                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="usr">
                                <img class="brd-rd50" src="images/resource/acti-thmb3.jpg" alt="" />
                                <div class="usr-innr">
                                    <h5><a href="#" title="">Willimes Domson</a></h5>
                                    <span>Family Adviser</span>
                                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="usr">
                                <img class="brd-rd50" src="images/resource/acti-thmb4.jpg" alt="" />
                                <div class="usr-innr">
                                    <h5><a href="#" title="">Holli Doe</a></h5>
                                    <span>Company CEO</span>
                                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
        <form class="topbar-search">
            <button type="submit"><i class="ion-ios-search-strong"></i></button>
            <input type="text" placeholder="Type and Hit Enter" />
        </form>
        <div class="usr-act">
            <span><img src="images/resource/topbar-usr1.jpg" alt="" /><i class="sts away"></i></span>
            <div class="usr-inf">
                <div class="usr-thmb brd-rd50">
                    <img class="brd-rd50" src="images/resource/usr.jpg" alt="" />
                    <i class="sts away"></i>
                    <a class="green-bg brd-rd5" href="#" title=""><i class="fa fa-envelope"></i></a>
                </div>
                <h5><a href="#" title="">John Smith</a></h5>
                <span>Co Worker</span>
                <i>076 9477 4896</i>
                <div class="act-pst-lk-stm">
                    <a class="brd-rd5 green-bg-hover" href="#" title=""><i class="ion-heart"></i> Love</a>
                    <a class="brd-rd5 blue-bg-hover" href="#" title=""><i class="ion-forward"></i> Reply</a>
                </div>
                <div class="usr-ft">
                    <a class="btn-danger" href="#" title=""><i class="fa fa-sign-out"></i> Logout</a>
                </div>
            </div>
        </div>
    </div>
    <div class="topbar-bottom-colors">
        <i style="background-color: #2c3e50;"></i>
        <i style="background-color: #9857b2;"></i>
        <i style="background-color: #2c81ba;"></i>
        <i style="background-color: #5dc12e;"></i>
        <i style="background-color: #feb506;"></i>
        <i style="background-color: #e17c21;"></i>
        <i style="background-color: #bc382a;"></i>
    </div>
</div><!-- Topbar -->

<header class="side-header light-skin expand-header">
    <div class="nav-head">主菜单<span class="menu-trigger"><i class="ion-android-menu"></i></span></div>
    <nav class="custom-scrollbar">
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-home"></i> <span>房间占用查询</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/searchOccupyRoom" title="">查询</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-home"></i> <span>客房账单管理</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/roomBillPage" title="">客房账单</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-android-contact"></i> <span>入住服务</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/addStayBusiness" title="">登记入住</a></li>
                </ul>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/stayBusinessPage" title="">住房服务管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>预定服务</span></a>
                <ul class="sb-drp">
                    <li><a href="/hotelsystem/addRoomBusiness" title="">预定客房</a></li>
                    <li><a href="/hotelsystem/roomBusinessPage" title="">预定业务管理</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>房客管理</span></a>
                <ul class="sb-drp">
                    <li><a href="${pageContext.request.contextPath}/getGuestMain.action" title="">房客列表</a></li>
                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>会员管理</span></a>
                <ul class="sb-drp">
                    <li><a href="${pageContext.request.contextPath}/getVipMain.action" title="">会员列表</a></li>

                </ul>
            </li>
        </ul>
        <ul class="drp-sec">
            <li class="has-drp"><a href="#" title=""><i class="ion-fireball"></i> <span>商品订单</span></a>
                <ul class="sb-drp">
                    <li><a href="${pageContext.request.contextPath}/goodsOrder.findAll?page=1&sie=4" title="">查看商品订单</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</header><!-- Side Header -->

<div class="option-panel">
    <span class="panel-btn"><i class="fa ion-android-settings fa-spin"></i></span>
    <div class="color-panel">
        <h4>Text Color</h4>
        <span class="color1" onclick="setActiveStyleSheet('color1'); return false;"><i></i></span>
        <span class="color2" onclick="setActiveStyleSheet('color2'); return false;"><i></i></span>
        <span class="color3" onclick="setActiveStyleSheet('color'); return false;"><i></i></span>
        <span class="color4" onclick="setActiveStyleSheet('color4'); return false;"><i></i></span>
        <span class="color5" onclick="setActiveStyleSheet('color5'); return false;"><i></i></span>
    </div>
</div><!-- Options Panel -->
<%--<div class="pg-tp">--%>
<%--    <i class="ion-cube"></i>--%>
<%--    <div class="pr-tp-inr">--%>
<%--        <h4>Welcome to <strong>ZAWYA</strong><span></span> Panel</h4>--%>
<%--        <span>Admin Template for medium and large web applications with ery clean and aesthetic style.</span>--%>
<%--    </div>--%>
<%--</div><!-- Page Top -->--%>


<!--modify here-->

<div class="panel-content">
    <div class="filter-items">
        <div class="row grid-wrap mrg20">

            <%--            edit from fjh--%>
            <%--            员工列表--%>
            <form id="form-list">
                <div class="col-md-12 grid-item col-sm-12 col-lg-12">
                    <div class="widget proj-order pad50-40">
                        <div class="wdgt-opt">
                            <span class="wdgt-opt-btn"><i class="ion-android-more-vertical"></i></span>
                            <div class="wdgt-opt-lst brd-rd5">
                                <a class="delt-wdgt" href="#" title="">Delete</a>
                                <a class="expnd-wdgt" href="#" title="">Expand</a>
                                <a class="refrsh-wdgt" href="#" title="">Refresh</a>
                            </div>
                        </div>
                        <div class="wdgt-ldr">
                            <div class="ball-scale-multiple">
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                        <h4 class="widget-title" style="margin-bottom: 10px;">商品订单列表</h4>
                        <%--                    <a class="add-proj brd-rd5" href="#" data-toggle="tooltip" title="Add Project">+</a>--%>



                        <!--工具栏-->
                        <div class="pull-left">
                            <div class="form-group form-inline">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-default" title="新建" onclick="location.href='${pageContext.request.contextPath}/goodsorder-add.jsp'"><i
                                            class="fa fa-file-o"></i> 新建
                                    </button>
                                    <button type="button" class="btn btn-default" title="删除"><i
                                            class="fa fa-trash-o"></i> 删除
                                    </button>
                                    <button type="button" class="btn btn-default" title="开启"><i class="fa fa-check"></i>
                                        开启
                                    </button>
                                    <button type="button" class="btn btn-default" title="屏蔽"><i class="fa fa-ban"></i>
                                        屏蔽
                                    </button>
                                    <button type="button" class="btn btn-default" title="刷新"><i
                                            class="fa fa-refresh"></i> 刷新
                                    </button>
                                </div>
                            </div>
                        </div>

                        <form id="form-delete">
                            <div class="table-wrap" style="margin-bottom: 20px;">

                                <table class="table table-bordered style2">
                                    <thead><tr><th>ID</th><th>顾客ID</th><th>员工ID</th><th>添加时间</th><th>支付状态</th><th>总价</th><th>标记</th></tr></thead>
                                    <tbody>

                                    <c:forEach var="item" items="${pageInfo}" varStatus="status">
                                        <tr>
                                            <td><h4 class="name">${item.id}</h4></td>          <%--class="date" 为内置样式类型 只要是字体需要加粗就可以用--%>
                                            <td><span class="name">${item.guestId}</span></td>
                                            <td><span class="name">${item.staffId}</span></td>
                                            <td><span class="name">${item.addTime}</span></td>
                                            <td><span class="name">${item.isPaid}</span></td>
                                            <td><span class="name">${item.total}</span></td>
                                            <td><div class="table-btns">
                                                <a href="#" title="" class="blue-bg-hover">修改</a>
                                            </div></td>
                                            <td>
                                                <input type="checkbox" name="staffIds" value="${item.id}" form="form-delete" id="${"chosen".concat(status.count)}"/>
                                                <label for="${"chosen".concat(status.count)}" style="padding-left: 0;">&zwnj;</label>
                                            </td>
                                        </tr>
                                    </c:forEach>

                                    </tbody>
                                </table>
                            </div>
                        </form>

                        <!-- .box-footer-->
                        <div class="box-footer">
                            <div class="pull-left">
                                <div class="form-group form-inline">
                                    总共2 页，共14 条数据。 每页 <select class="form-control">
                                    <option>1</option>
                                    <option>2</option>
                                    <option>3</option>
                                    <option>4</option>
                                    <option>5</option>
                                </select> 条
                                </div>
                            </div>

                            <div class="box-tools pull-right">
                                <ul class="pagination">
                                    <li><a href="#" aria-label="Previous">首页</a></li>
                                    <li><a href="#">上一页</a></li>
                                    <li><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">下一页</a></li>
                                    <li><a href="#" aria-label="Next">尾页</a></li>
                                </ul>
                            </div>

                        </div>
                        <!-- /.box-footer-->
                    </div>
                </div>
            </form>

        </div><!-- Filter Items -->
    </div>
</div><!-- Panel Content -->

<!--here-->


<footer>
    <p>Copyright <a href="http://www.bootstrapmb.com" title="">Example Company</a> &amp; 2017 - 2018</p>
    <span>10GB of 250GB Free.</span>
</footer>

<!-- Vendor: Javascripts -->
<script src="js/jquery.min.js" type="text/javascript"></script>
<!-- Vendor: Followed by our custom Javascripts -->
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/jquery-ui.min.js" type="text/javascript"></script>
<script src="js/select2.min.js" type="text/javascript"></script>
<script src="js/slick.min.js" type="text/javascript"></script>

<!-- Our Website Javascripts -->
<script src="js/isotope.min.js" type="text/javascript"></script>
<script src="js/isotope-int.js" type="text/javascript"></script>
<script src="js/jquery.counterup.js" type="text/javascript"></script>
<script src="js/waypoints.min.js" type="text/javascript"></script>
<script src="js/highcharts.js" type="text/javascript"></script>
<script src="js/exporting.js" type="text/javascript"></script>
<script src="js/highcharts-more.js" type="text/javascript"></script>
<script src="js/moment.min.js" type="text/javascript"></script>
<script src="js/jquery.circliful.min.js" type="text/javascript"></script>
<script src="js/fullcalendar.min.js" type="text/javascript"></script>
<script src="js/jquery.downCount.js" type="text/javascript"></script>
<script src="js/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="js/jquery.formtowizard.js" type="text/javascript"></script>
<script src="js/form-validator.min.js" type="text/javascript"></script>
<script src="js/form-validator-lang-en.min.js" type="text/javascript"></script>
<script src="js/cropbox-min.js" type="text/javascript"></script>
<script src="js/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="js/ion.rangeSlider.min.js" type="text/javascript"></script>
<script src="js/jquery.poptrox.min.js" type="text/javascript"></script>
<script src="js/styleswitcher.js" type="text/javascript"></script>
<script src="js/main.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        'use strict';

        Highcharts.chart('chrt1', {
            colors: ['#dadada','#67ba5f'],
            chart: {
                type: 'area',
                backgroundColor: "#FFFFFF",
                borderColor: "#335cad"
            },
            legend: {
                enabled: false
            },
            title: {
                text: 'Active users in current month (December)',
                style: { "color": "#444444", "fontSize": "12px" }
            },
            xAxis: {
                categories: ['1', '2', '3', '4', '5', '6', '7']
            },
            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
            },
            plotOptions: {
                area: {
                    categories: ['1', '2', '3', '4', '5', '6', '7'],
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [{
                data: [18,45,35,10,85,25,90]
            }, {
                data: [45,50,25,85,55,65,70]
            }]
        });

        Highcharts.chart('chrt2', {
            colors: ['#dadada','#f89898'],
            chart: {
                type: 'area',
                backgroundColor: "#FFFFFF",
                borderColor: "#335cad"
            },
            legend: {
                enabled: false
            },
            title: {
                style: {
                    display: 'none'
                }
            },
            xAxis: {
                categories: ['1', '2', '3', '4', '5', '6', '7']
            },
            credits: {
                enabled: false
            },
            tooltip: {
                pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
            },
            plotOptions: {
                area: {
                    categories: ['1', '2', '3', '4', '5', '6', '7'],
                    marker: {
                        enabled: false,
                        symbol: 'circle',
                        radius: 2,
                        states: {
                            hover: {
                                enabled: true
                            }
                        }
                    }
                }
            },
            series: [{
                data: [18,45,35,10,85,25,90]
            }, {
                data: [45,50,25,85,55,65,70]
            }]
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('#chrt3').highcharts({
                colors: ['#dadada','#f89898'],
                chart: {
                    type: 'area',
                    backgroundColor: "#FFFFFF",
                    borderColor: "#335cad"
                },
                legend: {
                    enabled: false
                },
                title: {
                    style: {
                        display: 'none'
                    }
                },
                xAxis: {
                    categories: ['1', '2', '3', '4', '5', '6', '7']
                },
                credits: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
                },
                plotOptions: {
                    area: {
                        categories: ['1', '2', '3', '4', '5', '6', '7'],
                        marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    data: [18,45,35,10,85,25,90]
                }, {
                    data: [45,50,25,85,55,65,70]
                }]
            });
        });

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            $('#chrt4').highcharts({
                colors: ['#dadada','#f89898'],
                chart: {
                    type: 'area',
                    backgroundColor: "#FFFFFF",
                    borderColor: "#335cad"
                },
                legend: {
                    enabled: false
                },
                title: {
                    style: {
                        display: 'none'
                    }
                },
                xAxis: {
                    categories: ['1', '2', '3', '4', '5', '6', '7']
                },
                credits: {
                    enabled: false
                },
                tooltip: {
                    pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'
                },
                plotOptions: {
                    area: {
                        categories: ['1', '2', '3', '4', '5', '6', '7'],
                        marker: {
                            enabled: false,
                            symbol: 'circle',
                            radius: 2,
                            states: {
                                hover: {
                                    enabled: true
                                }
                            }
                        }
                    }
                },
                series: [{
                    data: [18,45,35,10,85,25,90]
                }, {
                    data: [45,50,25,85,55,65,70]
                }]
            });
        });

        Highcharts.chart('chart5', {
            colors: ['#fc4b6c', '#26c6da', '#1e88e5'],
            chart: {type: 'column'},
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']
            },
            title: {text: null},
            yAxis: {min: 0},
            tooltip: {
                pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.percentage:.0f}%)<br/>',
                shared: true
            },
            plotOptions: {
                column: {stacking: 'percent'}

            },
            legend: {
                align: 'right',
                verticalAlign: 'top',
                symbolRadius: 0,
                itemStyle: {
                    color: '#555555',
                    fontSize: '13px',
                    fontWeight: '300'
                },
            },
            series: [{
                name: '2017',
                data: [500, 750, 1000, 1250, 1500, 1750, 2000, 2250, 1700, 2100, 900, 800,]
            }, {
                name: '2016',
                data: [1500, 1750, 2000, 2250, 500, 750, 1000, 1250, 1700, 2100, 900, 800,]
            }, {
                name: '2015',
                data: [1700, 2100, 900, 800, 500, 750, 1000, 1250, 1500, 1750, 2000, 2250,]
            }]
        });

        //===== ToolTip =====//
        if ($.isFunction($.fn.tooltip)) {
            $('[data-toggle="tooltip"]').tooltip();
        }

        $('.grid-item').draggable();
    });
</script>
</body>
</html>